from dash import html, dcc , dash_table


def inspection_layout(org_options, status_options):
    return html.Div([
        dcc.ConfirmDialog(
                    id='inspection-upload-dialog',
                    message=''
                ),

        html.H3("巡检记录表", style={
                "color": "white",
                "textAlign": "center",
                "marginBottom": "10px",
                "marginTop": "0px",
                "fontWeight": "bold",
                "letterSpacing": "4px"
            }),
        html.Div([
            
            dcc.Dropdown(
                id='inspection-org-filter',
                options=org_options,
                placeholder='选择机构',
                style={'width': '180px', 'display': 'inline-block', 'marginRight': '10px', 'verticalAlign': 'middle', 'height': '38px'}
            ),
            dcc.Dropdown(
                id='inspection-status-filter',
                options=status_options,
                placeholder='完成状态',
                style={'width': '150px', 'display': 'inline-block', 'marginRight': '10px', 'verticalAlign': 'middle', 'height': '38px'}
            ),
            dcc.DatePickerRange(
                id='plan-date-range',
                start_date_placeholder_text='计划开始',
                end_date_placeholder_text='计划结束',
                style={
                    'marginRight': '10px',
                    'marginTop': '-40px',
                    'verticalAlign': 'middle',
                    'height': '8px',
                    'display': 'inline-block',
                    'border': 'none',
                    'boxShadow': 'none',
                    'background': 'transparent',
                    'outline': 'none',  # 关键：去除外轮廓
                },
                className='no-border-datepicker'  # 可选：用于进一步自定义
            ),
            dcc.Input(
                id='inspection-product-search',
                placeholder='产品名称/编号',
                type='text',
                style={'width': '180px', 'marginRight': '10px', 'verticalAlign': 'middle', 'height': '38px'}
            ),
            html.Button(
                '筛选',
                id='inspection-filter-btn',
                n_clicks=0,
                style={
                    "backgroundColor": "#1a4a7a",
                    "color": "white",
                    "border": "none",
                    "padding": "6px 16px",
                    "borderRadius": "4px",
                    "fontWeight": "bold",
                    "marginRight": "10px",
                    "height": "38px",
                    "verticalAlign": "middle"
                }
            ),
            html.Button(
                '重置',
                id='inspection-reset-btn',
                n_clicks=0,
                style={
                    "backgroundColor": "#1a4a7a",
                    "color": "white",
                    "border": "none",
                    "padding": "6px 16px",
                    "borderRadius": "4px",
                    "fontWeight": "bold",
                    "marginRight": "10px",
                    "height": "38px",
                    "verticalAlign": "middle"
                }
            ),
            html.Div([
                html.Button(
                    '导出Excel',
                    id='export-inspection-excel',
                    n_clicks=0,
                    style={
                        "backgroundColor": "#1a4a7a",
                        "color": "white",
                        "border": "none",
                        "padding": "6px 16px",
                        "borderRadius": "4px",
                        "fontWeight": "bold",
                        "height": "38px",
                        "verticalAlign": "middle"
                    }
                ),
                dcc.Download(id='download-inspection-excel'),
                dcc.Upload(
                    id='upload-inspection-plan',
                    children=html.Button('上传巡检计划表', style={
                        "backgroundColor": "#1a4a7a",
                        "color": "white",
                        "border": "none",
                        "padding": "6px 16px",
                        "borderRadius": "4px",
                        "fontWeight": "bold",
                        "height": "38px",
                        "verticalAlign": "middle"
                    }),
                    accept='.xls,.xlsx',
                    style={'display': 'inline-block'}
                ),
            ], style={'marginLeft': 'auto', 'display': 'flex', 'gap': '16px', 'verticalAlign': 'middle'}),
        ],
        style={
            'marginBottom': '20px',
            'border': '2px solid #1a4a7a',
            'borderRadius': '8px',
            'padding': '18px 18px 10px 18px',
            'position': 'relative',
            'backgroundColor': 'transparent',
            'display': 'flex',
            'alignItems': 'center'
        }),
        dash_table.DataTable(
            id='inspection-record-table',
            columns=[
                {"name": "产品id", "id": "product_id", "type": "numeric"},
                {"name": "产品名称", "id": "product_name"},
                {"name": "产品编号", "id": "product_code"},
                {"name": "所属机构", "id": "org_name"},
                {"name": "计划巡检日期", "id": "inspection_plan_date"},
                {"name": "实际巡检日期", "id": "inspection_complete_date"},
                {"name": "巡检类型", "id": "inspection_type"},
                {"name": "巡检发现", "id": "issues_found"},
                {"name": "巡检结果", "id": "inspection_result"},
                {"name": "巡检人员", "id": "inspector"},
                {"name": "巡检公司", "id": "inspection_company"},
                {"name": "完成状态", "id": "inspection_status"},
                {"name": "备注", "id": "remarks"},
            ],
            data=[],  # 由回调动态填充
            page_size=15,
            sort_action="native",      # 启用排序
            filter_action="native",    # 启用筛选
            style_table={'overflowX': 'auto', 'backgroundColor': '#102040'},
            style_header={
                'backgroundColor': '#102040',
                'color': 'white',
                'fontWeight': 'bold',
                'fontSize': '14px',
                'border': '1px solid #1a4a7a'
            },
            style_data={
                'backgroundColor': '#102040',
                'color': 'white',
                'fontSize': '13px',
                'border': '1px solid #1a4a7a'
            },
            style_cell={
                'textAlign': 'center',
                'minWidth': '80px',
                'maxWidth': '200px',
                'whiteSpace': 'normal',
                'backgroundColor': '#102040',
                'color': 'white'
            },
        )
    ])